<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:p="http://primefaces.org/ui"
	xmlns:pretty="http://ocpsoft.com/prettyfaces"
	xmlns:security="http://www.springframework.org/security/facelets/tags"
	xmlns:ui="http://java.sun.com/jsf/facelets">

<ui:composition template="../templates/mainTemplate.xhtml">

	<ui:define name="content">
		<div>
			<h2 id="page-heading">
				<h:outputText value="#{companyDetailsBean.company.name}" />
			</h2>
		</div>

		<div class="toolbar">
			<h:form id="toolbar-form">
				<p:toolbar>
					<p:toolbarGroup align="left">
						<h:panelGroup
							rendered="#{!empty companyDetailsBean.dailyChange and !empty companyDetailsBean.tradingVolume and !empty companyDetailsBean.marketValue}">
							<p:commandButton type="button"
								value="#{msg['companydetails.sharePrice']}"
								onclick="toggleBox(' #graph1 ');" image="ui-icon-signal" />
							<p:commandButton type="button"
								value="#{msg['companydetails.volume']}"
								onclick="toggleBox(' #graph2 ');" image="ui-icon-signal" />
							<p:commandButton type="button"
								value="#{msg['companydetails.circulation']}"
								onclick="toggleBox(' #graph3 ');" image="ui-icon-signal" />
						</h:panelGroup>

						<h:panelGroup rendered="#{empty companyDetailsBean.activeOrders}">
							<p:separator />
							<p:commandButton type="button"
								value="#{msg['companydetails.commision']}"
								onclick="toggleBox(' #order ');" image="ui-icon-contact" />
						</h:panelGroup>

						<p:separator />

						<p:commandButton
							actionListener="#{companyDetailsBean.initLinearModels}"
							process="@none" update="graphs"
							value="#{msg['companydetails.refresh']}" image="ui-icon-refresh" />

						<p:separator />

						<p:commandButton
							value="#{msg['companydetails.archiveQuotations']}"
							action="pretty:companyArchive" ajax="false"
							image="ui-icon-folder-open">
							<f:setPropertyActionListener target="#{companyArchiveBean.name}"
								value="#{companyDetailsBean.company.name}" />
						</p:commandButton>
					</p:toolbarGroup>
				</p:toolbar>

				<p:toolbar id="graphNavigation">
					<p:toolbarGroup align="left">
						<p:commandButton disabled="#{companyDetailsBean.firstPage}"
							action="#{companyDetailsBean.firstPage}"
							update="graphNavigation graphs"
							value="#{msg['companyDetails.oldestData']}" image="ui-icon-circle-triangle-w" />
					</p:toolbarGroup>
					
					<p:toolbarGroup align="left">
						<p:commandButton disabled="#{companyDetailsBean.firstPage}"
							action="#{companyDetailsBean.previousPage}"
							update="graphNavigation graphs"
							value="#{msg['companyDetails.oldestData']}" image="ui-icon-circle-arrow-w" />
					</p:toolbarGroup>

					<p:toolbarGroup align="right">
						<p:commandButton disabled="#{companyDetailsBean.lastPage}"
							action="#{companyDetailsBean.lastPage}" 
							update="graphNavigation graphs"
							value="#{msg['companyDetails.newestData']}"
							image="ui-icon-circle-triangle-e" />
					</p:toolbarGroup>

					<p:toolbarGroup align="right">
						<p:commandButton disabled="#{companyDetailsBean.lastPage}"
							action="#{companyDetailsBean.nextPage}" 
							update="graphNavigation graphs"
							value="#{msg['companyDetails.laterData']}"
							image="ui-icon-circle-arrow-e" />
					</p:toolbarGroup>
				</p:toolbar>
			</h:form>
		</div>


		<h:panelGroup id="graphs"
			rendered="#{!empty companyDetailsBean.dailyChange and !empty companyDetailsBean.tradingVolume and !empty companyDetailsBean.marketValue}">
			<div class="box" id="graph1">
				<h2>
					<a id="toggle-graph1" href="#"><h:outputText
							value="#{msg['companydetails.valueChange']}" /></a>
				</h2>
				<div id="graph1" class="block paragraphs">
					<p:lineChart id="graphDaily"
						value="#{companyDetailsBean.dailyChange}"
						title="#{msg['companydetails.sharePriceTitle']}" xaxisAngle="90" />
				</div>
			</div>

			<div class="box" id="graph2">
				<h2>
					<a id="toggle-graph2" href="#"><h:outputText
							value="#{msg['companydetails.volumeChange']}" /></a>
				</h2>
				<div id="graph2" class="block paragraphs">
					<p:lineChart id="graphTrading"
						value="#{companyDetailsBean.tradingVolume}"
						title="#{msg['companydetails.volumeTitle']}" xaxisAngle="90" />
				</div>
			</div>

			<div class="box" id="graph3">
				<h2>
					<a id="toggle-graph3" href="#"><h:outputText
							value="#{msg['companydetails.circulationChange']}" /></a>
				</h2>
				<div id="graph3" class="block paragraphs">
					<p:lineChart id="graphMarket"
						value="#{companyDetailsBean.marketValue}"
						title="#{msg['companydetails.circulationTitle']}" xaxisAngle="90" />
				</div>
			</div>
		</h:panelGroup>


		<!-- ===============[ACTIVE ORDERS]=============== -->
		<ui:include src="companyActiveOrder.xhtml" />
		<!-- ===============[/ACTIVE ORDERS]=============== -->


		<!-- ===============[ORDER FORM]=============== -->
		<ui:include src="newOrder.xhtml" />
		<!-- ===============[/ORDER FORM]=============== -->
	</ui:define>

	<ui:define name="js">
		<h:outputScript library="js" name="order.js" />
		<h:outputScript library="js" name="toggle.js" />
	</ui:define>
</ui:composition>

</html>
